<template>
	<view style="background-color: #F6F6F6; height: 850px;">
		<view class="" style="width: 94%;margin: 0 auto;background-color: white;">
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u--form labelPosition="left" v-model="addressFrom" ref='from'>
				<view class="view-form">
					<u-cell @click="showPicker" :title="title" isLink :value="addressFrom.proviceName">
					</u-cell>
					<view>
						<u-picker :show="cityShow" :columns="columnsCity" @cancel="cancel" @confirm="confirm"
							keyName="name">
						</u-picker>
					</view>
				</view>
				<view class="view-form">
					<u-cell @click="showArea" :title="areaTitle" isLink :value="addressFrom.cityName">
					</u-cell>
					<view>
						<u-picker :show="areaShow" ref="uPicker" :columns="columnsArea" @confirm="cityConfirm"
							@change="changeHandler" @cancel="areaCancel" keyName="name"></u-picker>
					</view>
				</view>
				<u-form-item label="详细地址"  prop="address" borderBottom ref="item1" labelWidth="70px" style="padding-left: 18px;">
					<u--input v-model="addressFrom.address" border="none"></u--input>
				</u-form-item>
				<u-form-item label="姓名"  prop="consignee" borderBottom ref="item1" style="padding-left: 18px;">
					<u--input v-model="addressFrom.consignee" border="none"></u--input>
				</u-form-item>
				<u-form-item label="手机号" prop="phone" labelWidth="60px" borderBottom ref="item1" style="padding-left: 18px;">
					<u--input v-model="addressFrom.phone" border="none"></u--input>
				</u-form-item>
				<view class="" style="width: 94%;margin: 0 auto;margin-top: 50px;padding-bottom: 50px;">
					<u-button type="primary"  shape="circle" text="确认修改" @click="updateAdderss"></u-button>
				</view>
			</u--form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			// 验证手机号的规则
			var cheackMobile = (rule, value, cb) => {
				// 手机号一般最小以“13”开头
				const regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
				if (regMobile.test(value)) {
					return cb()
				}
				cb(new Error('请输入合法的手机号!'))
			}
			return {
				// 校验规则
				addressRules: {
					address: [{
							required: true,
							message: '请输入详细地址',
							trigger: 'blur'
						},
					],
					consignee: [{
							required: true,
							message: '请输入收货人',
							trigger: 'blur'
						},
					],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: 'blur'
						},
						{
							validator: cheackMobile,
							trigger: 'blur'
						}
					],
				},
				// 选择市标题
				areaTitle:'选择城市',
				data: {
					// 详情地址
					address:'',
					// 用户名
					userName:'',
					phone: '', //手机号
					proviceId: '', //省ID
					provice: '', //省名称
					cityName: '', //市名称
					cityId: '', //市ID
					areaName: '', //县名称
					areaId: '' ,//县ID
				},
				// 市数据
				columnsArea: [
				
				],
				// 县数据
				columnData: [
				
				],
				// 省数据
				columnsCity: [
				
				],
				name: '', //省名称
				cityAreaName: '', //市县名称
				//所有省 默认为false
				cityShow: false,
				// 市弹窗 默认为false
				areaShow: false,
				// 选择省份标题
				title:'选择省份',
				// 省份信息集合
				provices: {
					id: '',//id
					name: '',//省名称
					pid: '',//父id
					level: ''//层级 0 1 2 省市区县
				},
				show: false,
				addressFrom:{},
				// 地址id
				addressId:'',
			}
		},
		onLoad:function(option){
			this.addressId = option.id
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.from.setRules(this.addressRules)
		},
		mounted(){
			// 查询所有省
			this.getAllProvinces()
			// 根据id查询地址信息
			this.getAllAdderssById()
		},
		methods: {
			// 修改用户地址
			updateAdderss(){
					this.$myRequest({
						url:'/eat-service/userAddress/updateAdderss',
						method:'get',
						data:{
							id : this.addressFrom.id,
							consignee : this.addressFrom.consignee,
							phone : this.addressFrom.phone,
							proviceId : this.data.proviceId,
							proviceName : this.addressFrom.proviceName,
							cityId : this.data.cityId,
							countyId : this.data.areaId,
							cityName : this.addressFrom.cityName,
							address : this.addressFrom.address,
							detailedAddress: this.addressFrom.proviceName + this.addressFrom.cityName + this.addressFrom.address
						}
					}).then(res => {
						if(res.data.flag != null){
							this.account = ''
							// 成功跳转
							uni.navigateTo({
								url:'/pages/personal/address/address'
							})
							window.location.reload();
							uni.showToast({
								title: '修改成功',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'success',
								//显示持续时间为 2秒
								duration: 2000
							})
						} else {
							uni.showToast({
								title: '修改失败',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'success',
								//显示持续时间为 2秒
								duration: 2000
							})
						}
					})
			},
			// 根据id查询地址信息
			getAllAdderssById(){
				this.$myRequest({
					url: '/eat-service/userAddress/getAllAdderssById',
					method: 'get',
					data:{
						id : this.addressId,
					}
				}).then(res => {
					this.addressFrom = res.data.obj.obj
				})
			},
			//开启市县选择器根据省ID查询所有市
			showArea() {
				this.areaShow = true
				this.columnsArea.length = 0
				this.getAllCityArea()
				this.getAllArea()
			},
			//开启城市选择器
			showPicker() {
				this.cityShow = true
			},
			//根据省ID查询所有市以及第一个市下的所有县
			getAllCityArea() {
				this.provices.id = this.addressFrom.proviceId
				if(this.columnsArea.length == 0){
					this.$myRequest({
						url: '/eat-service/area/getAllCityArea',
						method: 'post',
						data: JSON.stringify(this.provices)
					}).then(res => {
						this.columnsArea.push(res.data.obj.cityEntities)
						this.columnsArea.push(res.data.obj.areaEntities)
					})
				}else {
					
				}
			},
			//根据市ID查询所有县
			getAllArea() {
				this.$myRequest({
					url: '/eat-service/area/getAllArea',
					method: 'get',
					data: {
						'id': this.provices.id
					}
				}).then(res => {
					this.columnData = res.data.obj
				})
			},
			//查询所有省
			getAllProvinces() {
				this.$myRequest({
					url: '/eat-service/area/getAllProvinces',
					method: 'get'
				}).then(res => {
					this.columnsCity.push(res.data.obj)
					console.log(this.columnsCity)
				})
			},
			//关闭城市选择器
			cancel() {
				this.cityShow = false
			},
			//关闭市县选择器
			areaCancel() {
				this.areaShow = false
			},
			//选择后关闭城市选择器
			confirm(e) {
				this.addressFrom.proviceName = e.value[0].name
				this.addressFrom.proviceId = e.value[0].id
				this.provices.pid = e.value[0].pid
				this.provices.level = e.value[0].level
				this.provices.id = e.value[0].id
				this.data.provice = e.value[0].name
				this.data.proviceId = e.value[0].id
				this.data.id = e.value[0].id
				this.columnsArea = []
				this.columnData = []
				this.cityShow = false
				this.cityAreaName = ''
			},
			// 回调参数为包含columnIndex、value、values
			cityConfirm(e) {
				this.data.cityName = e.value[0].name
				this.data.cityId = e.value[0].id
				this.data.areaName = e.value[1].name
				this.data.areaId = e.value[1].id
				this.addressFrom.cityName = e.value[0].name + e.value[1].name
				this.areaShow = false
			},
			//当选择器数据发生改变时触发
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			
		}
	}
</script>

<style scoped>
</style>